<template>
	<view class="g-checkbox">
		<view class="title-wrap" v-show="title">
			<text class="title-wrap-theme">{{title}}</text>
			<view class="title-wrap-theme-icon" @click="clickHide">
				<span class="iconfont icon-window-down theme-icon" :class="[Cpu_rotate]" v-show='foldable'></span>
			</view>
		</view>
		<view class="content-wrap" v-show="showItem">
			<slot></slot>
		</view>
	</view>
</template>
<script>
export default {
	name:'g-checker-group',
	data() {
		return {
			checksItems:[],//子组件的实例
			choicedVal:[],//已选择的数据
			showItem:true,
		};
	},
	props: {
		//每一项的主题,Boolean(title)==false将隐藏head
		title:{
			type:String
		},
		value:'',
		//可折叠
		foldable:{
			type:Boolean,
			default:false,
		},
		//尺寸大小
		size:{
			default:"middle"
		},
		//每排数量
		row:{
			type:Number,
			default:3
		},
		multiple:{
			type:Boolean,
			default:false
		},
		
	},
	methods: {
		clickHide(){
			this.foldable&&(this.showItem = !this.showItem)
		},
		init(){
			//根据是否多选来进行变量初始化
			if(this.multiple){
				this.choicedVal = []
			}else{
				this.choicedVal = ''
			}
		}
	},
	computed: {
		Cpu_rotate(){
			//旋转图标
			if(!this.showItem){
				return `theme-icon-rotation`
			}
		},
	},
	watch:{
		choicedVal(n,o){
			this.$emit("input",n)
		},
		value(n,o){
			this.choicedVal = n
		},
	},
	created() {
		
	}
};
</script>
<style lang="scss" scoped>
	@import "../../iconfont.css";
	@import "../../theme.scss";
	.g-checkbox{
		width: 100%;
		display: flex;
		flex-direction: column;
		.title-wrap{
			display: flex;
			justify-content: space-between;
			&-theme{
				font-size: 400;
				padding: 12rpx 0;
				font-size: 30rpx;
				color:$g-text-darker;
			}
			&-theme-icon{
				display: flex;
				align-items: center;
				.theme-icon{
					font-size: 42rpx;
					color: $g-text-darker;
					transition: 0.15s;
					transform:rotate(0deg);
					&-rotation{
						transform:rotate(-90deg);
					}
				}
			}
		}
		.content-wrap{
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>
